<template>
    <!-- 总览 -->
    <div class="card-wrap">
        <div class="card-title">总览</div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content" style="background-color: #409EFF;">
                    <span class="iconfont icon--"></span>
                    <div>
                        <span>用户数</span>
                        <span class="total-num">{{statistics.userCount}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content" style="background-color: #ff5c33;">
                    <span class="iconfont icon-wodetiezi"></span>
                    <div>
                        <span>帖子数</span>
                        <span class="total-num">{{statistics.postCount}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content" style="background-color: #4db8ff;">
                    <span class="iconfont icon-huati"></span>
                    <div>
                        <span>话题数</span>
                        <span class="total-num">{{statistics.disCount}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content" style="background-color: #8cd98c;">
                    <span class="iconfont icon-pinglun"></span>
                    <div>
                        <span>评论数</span>
                        <span class="total-num">{{statistics.commentCount}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 用户统计 -->
    <div class="card-wrap">
        <div class="card-title">用户统计</div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content">
                    <span class="iconfont icon--"></span>
                    <div>
                        <span style="color: #616161;">今日新增</span>
                        <span style="color: #616161;font-size: 30px;" class="total-num">{{statistics.day}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">
                    <span class="iconfont icon-wodetiezi"></span>
                    <div>
                        <span style="color: #616161;">本周新增</span>
                        <span style="color: #616161;font-size: 30px;" class="total-num">{{statistics.week}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">
                    <span class="iconfont icon-huati"></span>
                    <div>
                        <span style="color: #616161;">本月新增</span>
                        <span style="color: #616161;font-size: 30px;" class="total-num">{{statistics.month}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">
                    <span class="iconfont icon-huati"></span>
                    <div>
                        <span style="color: #616161;">上月新增</span>
                        <span style="color: #616161;font-size: 30px;" class="total-num">{{statistics.last_month}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 近30天用户分析 -->
    <div class="card-wrap">
        <div class="card-title">近30天用户趋势</div>
        <div v-if="echartsLoading" id="userDataLine" style="width: 100%;height:400px;"></div>
    </div>
</template>
<script setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
import http from "@/utils/request";

const statistics = reactive({
    userCount: 0,
    postCount: 0,
    disCount: 0,
    commentCount: 0,
    day: 0,
    week: 0,
    month: 0,
    last_month: 0,
    month_data: {}
})

let echartsLoading = ref(false);

onMounted(() => {
    getUserData();
})

// 近30天用户分析折线图
function userDataChartLine() {
    var myChart = echarts.init(document.getElementById('userDataLine'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '最近30天用户分析',
            left: 'center'
        },
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: statistics.month_data.lable
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '增长人数',
            type: 'line',
            symbol: 'circle', //折点设定为实心点
            symbolSize: 8, //设定实心点的大小
            itemStyle: {
                normal: {
                    color: '#07c160',
                    lineStyle: {
                        color: '#07c160'
                    }
                }
            },
            data: statistics.month_data.value
        }]
    };

    myChart.setOption(option);
}

function getUserData() {
    echartsLoading.value = false;
    http.get("/admin/statistics/user").then(res => {
        statistics.userCount = res.result.userCount;
        statistics.postCount = res.result.postCount;
        statistics.disCount = res.result.disCount;
        statistics.commentCount = res.result.commentCount;
        statistics.day = res.result.day;
        statistics.week = res.result.week;
        statistics.month = res.result.month;
        statistics.last_month = res.result.last_month;
        statistics.month_data = res.result.month_data;

        echartsLoading.value = true;

        nextTick(()=>{
            userDataChartLine();
        })
    })
}
</script>
<style lang="scss" scoped>
.card-wrap {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 10px;

    .card-title {
        font-weight: bold;
        margin-bottom: 15px;
    }
}

.grid-content {
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #FFFFFF;
}

.grid-content .iconfont {
    font-size: 50px;
    margin-right: 30px;
}

.grid-content .total-num {
    margin-top: 5px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.grid-content>div {
    display: flex;
    flex-direction: column;
}
</style>